<template>
	<view>
		<view v-if="post_status==0">
			<view class="u-form-item">
				<view class="name">单位名称</view>
				<u--input placeholder="单位名称" customStyle="background:#f4f9fb;" v-model="forms.company"></u--input>

				<view class="name">单位税号</view>
				<u--input placeholder="单位税号" customStyle="background:#f4f9fb;" v-model="forms.tax_id"></u--input>


				<view class="name">产品名称</view>

				<view class="select_input" @click="company_show = true">{{product_name}}</view>
				<u-picker :show="company_show" placeholder="单位名称" keyName="label" :columns="company_ary"
					v-model="forms.product_id" @confirm="check_company" @cancel="close_picker" @close="close_picker"
					:closeOnClickOverlay="true"></u-picker>
				<view class="name">份数</view>
				<u--input placeholder="份数" customStyle="background:#f4f9fb;" v-model="forms.num"></u--input>

				<view class="name">单价</view>
				<u--input placeholder="单价" customStyle="background:#f4f9fb;" v-model="forms.price"></u--input>

				<view class="name">订单总金额</view>
				<u--input placeholder="订单总金额" customStyle="background:#f4f9fb;" v-model="forms.amount"
					:disabled="true"></u--input>



				<view class="name">开始日期</view>
				<u-datetime-picker :show="starTime_show" v-model="forms.starttime" @confirm="checkTime_star" mode="date"
					@cancel="close_picker" @close="close_picker" :closeOnClickOverlay="true"></u-datetime-picker>
				<view class="select_input" @click="starTime_show=true" style="width:calc(100% - 40rpx);">
					{{select_date.star}}
				</view>


				<view class="name">结束日期</view>
				</u--input><u-datetime-picker :show="endTime_show" v-model="forms.endtime" mode="date"
					@confirm="checkTime_end" @cancel="close_picker" @close="close_picker"
					:closeOnClickOverlay="true"></u-datetime-picker>
				<view class="select_input" @click="endTime_show=true" style="width:calc(100% - 40rpx);">
					{{select_date.end}}
				</view>

				<view class="name">发票类型</view>

				<u-radio-group v-model="forms.invoice_type" iconPlacement="left">
					<u-radio shape="circle" label="普票" name="普票" style="margin-right:30rpx;"></u-radio>
					<u-radio shape="circle" label="专用发票" name="专用发票"></u-radio>
				</u-radio-group>

				<view class="name">收票邮箱</view>
				<u--input placeholder="收票邮箱" customStyle="background:#f4f9fb;" v-model="forms.invoice_email"></u--input>

				<view class="name">发票备注</view>
				<u--input placeholder="发票备注" customStyle="background:#f4f9fb;"
					v-model="forms.invoice_remark"></u--input>

				<view class="name">发票要求</view>
				<u--input placeholder="发票要求" customStyle="background:#f4f9fb;" v-model="forms.invoice_desc"></u--input>

				<view class="address">
					<view class="address-list" v-for="(item,idx) in forms.address">
						<view class="flex">
							<view class="uname">姓名:{{item.name}}</view>
							<view class="mobile">手机:{{item.mobile}}</view>
						</view>
						<view class="flex">
							<view class="num">份数:{{item.num}}</view>
							<view class="code">邮编:{{item.code}}</view>
						</view>
						<view class="_address">地址:{{item.address}}</view>
						<view class="flex" style="justify-content:left">挂号<u-switch :size="23" v-model="item.is_special"
								:activeValue="1" :inactiveValue="0" style="margin-left:20rpx;"></u-switch></view>
					</view>
					<view class="name" @click="addAddress">地址 + </view>

				</view>
				<u-button type="primary" text="下一步" style="margin-top:40rpx;" @click="post"></u-button>

			</view>
		</view>
		<view v-if="post_status==1" class="end">
			<view class="iconfont icon-chenggong"></view>
			<view class="tips">发布成功</view>
			<view class="bottom" @click="post_status=0">继续发布</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getOrderList,
		addOrder,
		getOrderByid
	} from 'config/api.js';
	export default {
		data() {
			return {
				oldData: [],
				post_status: 0,
				starTime_show: false,
				endTime_show: false,
				company_show: false,
				select_date: {
					star: '选择开始时间',
					end: '选择结束时间'
				},
				product_name: '舆情专报',
				company_ary: [
					[{
						label: '舆情专报',
						// 其他属性值
						id: 1
						// ...
					}, {
						label: '麻辣新舆情',
						id: 2
					}, {
						label: '舆情套餐',
						id: 3
					}, {
						label: '舆情日报',
						id: 4
					}]
				],
				forms: {
					id: '0',
					company: '',
					tax_id: '',
					product_id: '1',
					num: '1',
					price: '1280',
					amount: '1280',
					starttime: '',
					endtime: '',
					invoice_type: '普票',
					invoice_email: '',
					invoice_remark: '',
					invoice_desc: '',
					address: []
				}
			}
		},
		onReachBottom() {

		},

		watch: {
			'forms.price'(a, b) {
				this.$set(this.forms, 'amount', a * this.forms.num)
			},
			'forms.num'(a, b) {
				this.$set(this.forms, 'amount', a * this.forms.price)
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad(options) {
			if (this.hasLogin === false) {
				uni.navigateTo({
					url: '/pages/user/login'
				})
			}
			let address = uni.setStorageSync('address', '')
			if (options.type == 'xd') {
				this.oldData.type = 'xd'
				this.oldData.id = options.id
				if (this.oldData.id > 0) {
					getOrderByid({
						id: this.oldData.id
					}).then(r => {
						if (r.data.id) {
				
							uni.setStorageSync('address',r.data.order_address)
							this.forms = r.data
							// $.each(r.data.order_address,function(key,value){
							//         delete value.id;
							//     })
							// console.log(r.data.order_address)
							// r.data.order_address = (arr, fieldName) => {
							// 	return arr.map(obj => {
							// 		delete obj[id];
							// 		return obj;
							// 	});
							// };
							this.forms.id = 0
							
							this.forms.address = r.data.order_address
							
						
							
							const month = new Date(r.data.endtime).getMonth() + 1
							this.forms.starttime = this.select_date.star = uni.$u.timeFormat(new Date(r.data
								.endtime).getTime() + 60 * 60 * 24 * 1000, 'yyyy-mm-dd')
							this.forms.endtime = this.select_date.end = new Date(r.data.endtime).getFullYear() +
								1 + '-' + month + '-' + new Date(r.data.endtime).getDate()
							// this.forms.endtime = this.select_date.end = year + 1 + '-' + month + '-' + day
						}
					})

				}
			} else if (options.type == 'edit') {
				this.oldData.type = 'edit'
				this.oldData.id = options.id
				if (this.oldData.id > 0) {
					
					getOrderByid({
						id: this.oldData.id
					}).then(r => {
						if (r.data.id) {
							uni.setStorageSync('address',r.data.order_address)
							this.forms = r.data
							this.forms.address = r.data.order_address
						}
					})

				}
			} else {

				const today = new Date();
				// 获取年、月和日
				const year = today.getFullYear();
				const month = today.getMonth() + 1; // getMonth() 返回的月份从0开始，所以需要加1
				const day = today.getDate();
				this.forms.starttime = this.select_date.star = year + '-' + month + '-' + day
				this.forms.endtime = this.select_date.end = year + 1 + '-' + month + '-' + day
			}
		},
		methods: {
			address_load() {
				let address = uni.getStorageSync('address')
				this.$set(this.forms, 'address', address)
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/index/address'
				})
			},
			post() {
				let postData = []
				postData = this.forms
				postData.starttime = uni.$u.timeFormat(postData.starttime, 'yyyy-mm-dd')
				postData.endtime = uni.$u.timeFormat(this.forms.endtime, 'yyyy-mm-dd')
				postData.address = postData.address
				addOrder(postData).then(r => {
					if (r.code == 200) {
						this.forms = {
							id: '0',
							company: '',
							tax_id: '',
							product_id: '1',
							num: '1',
							price: '1280',
							amount: '1280',
							starttime: '',
							endtime: '',
							invoice_type: '普票',
							invoice_email: '',
							invoice_remark: '',
							invoice_desc: '',
							address: []
						}
						const today = new Date();
						// 获取年、月和日
						const year = today.getFullYear();
						const month = today.getMonth() + 1; // getMonth() 返回的月份从0开始，所以需要加1
						const day = today.getDate();
						this.forms.starttime = this.select_date.star = year + '-' + month + '-' + day
						this.forms.endtime = this.select_date.end = year + 1 + '-' + month + '-' + day
						this.post_status = 1;
					}
				})
			},
			getTime(date) {
				let Y = date.getFullYear(),
					M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
					D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
				return Y + '-' + M + '-' + D
			},
			close_picker() {
				this.company_show = false
				this.starTime_show = false
				this.endTime_show = false
				console.log(this.forms)
			},
			check_company(e) {
				this.product_name = e.value[0].label
				this.forms.product_id = e.value[0].id
				this.company_show = false
			},
			checkTime_star(e) {
				let t = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$set(this.select_date, 'star', t)
				this.close_picker()
			},
			checkTime_end(e) {
				let t = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$set(this.select_date, 'end', t)
				this.close_picker()
			}
		}
	}
</script>

<style>
	page {
		padding: 20rpx;
		/* background-color: #f5f5f5; */
	}

	.end {
		.icon-chenggong {
			text-align: center;
			font-size: 130rpx;
			color: #3c9cff;
			margin: 80rpx;
		}

		.tips {
			text-align: center;
			font-size: 40rpx;
			color: #3c9cff;
		}

		.bottom {
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background-color: #3c9cff;
			width: 100px;
			margin: 0 auto;
			padding: 15rpx 0;
			margin-top: 50rpx;
		}
	}

	.address-list {
		padding: 15rpx 0;
		border-bottom: 1px solid #eee;
		color: #666;
		line-height: 50rpx;
		font-size: 28rpx;

		.flex {
			display: flex;
			width: 100%;
			justify-content: space-between;

		}
	}

	.address {
		border: 1px solid #b3d2f1;
		border-radius: 10rpx;
		padding: 10rpx;
		margin: 30rpx 0;

		.name {
			padding: 10rpx 0;
			text-align: center;
			width: 100%;
			color: #3c9cff !important;
			margin: 0 !important;

			&:hover {
				background-color: #eee;
			}
		}
	}

	.select_input {
		background-color: #f4f9fb;
		padding: 12rpx 18rpx;
		width: 400rpx;
	}

	.u-form-item {
		.name {
			font-size: 32rpx;
			color: #000;
			margin: 30rpx 0 20rpx 0;
		}
	}
</style>